<template>
        <div class="login">
            <div class="login-header"></div>
            <div class="login-footer" >
              <img class="login-2" src="../assets/login/login-2.png"/>
              <img class="login-5" src="../assets/login/login-5.png"/>
            </div>
            <div class="table" v-show="loginIsNav">
              <div class="table-handup">
                   <div class="title">ERPV9</div>
                   <!-- @click="handlSetting" -->
                   <img class="login-3" src="../assets/login/login-3.png" @click="handlClick"/>
                   <img class="login-4" src="../assets/login/login-4.png" />
                   <img class="login-1" src="../assets/login/login-1.png"/>
              </div>
                <div class="table-down">

           <!-- 表单 -->
             <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm  bbbb"  >
               <el-form-item label="操作员：" prop="age">
    <el-input v-model.number="ruleForm2.age" ></el-input>
  </el-form-item>
  <el-form-item label="登陆密码：" prop="pass">
    <el-input type="password" v-model="ruleForm2.pass" autocomplete="off"></el-input>
  </el-form-item>
  <!-- <el-form-item label="确认密码" prop="checkPass">
    <el-input type="password" v-model="ruleForm2.checkPass" autocomplete="off"></el-input>
  </el-form-item> -->
  
  <!-- //ip地址 -->
<el-form-item label="服务器名：" prop="region" >
    <el-select v-model="ruleForm2.region" placeholder="192.168.112" class="server">
      <el-option label="192.168.312" value="shanghai"></el-option>
      <el-option label="192.168.122" value="beijing"></el-option>
      <el-option label="192.168.115" value="beijing"></el-option>
      <el-option label="192.168.414" value="beijing"></el-option>
     
    </el-select>
</el-form-item>

<el-form-item label="链接状态 :" label-width="93px" >
   <!-- <el-input v-model="ruleForm2.lianjie" type="text">aaa</el-input> -->
   <div class="awc">
      <span class="awc-text">Enter链接：</span>
      
      <div  class="awc-circle">
        <span class="awc-circle-yuan"></span>
        <span class="awc-circle-yuan"></span>
        <span class="awc-circle-yuan"></span>
      </div>
   </div>
  </el-form-item>

  <el-form-item class="c111">
    <el-button type="info"
     class="denglu"
     @click="submitForm('ruleForm2')"
    >登陆</el-button>
    <el-button @click="resetForm('ruleForm2')" class="chongzhi">重置</el-button>
  </el-form-item>
</el-form>
                </div>
            </div>
            <!-- 设置。。。。 -->
             <div class="table"  v-show="loginIsShow" >
              <div class="table-handup">
                   <div class="title">ERPV9</div>
                   <img class="login-4" src="../assets/login/login-4.png" @click="handlClick"/>
                      <div class="table-setting">
                            <div class="change-her">
                                <span class="change-her-one">登陆按键:</span>
                                <span class="change-her-two">使用</span>
                                <input class="change-her-three" type="checkbox"/>
                                 <span class="change-her-four">链接地址:</span>
                                <span class="change-her-five">显示</span>
                                <input class="change-her-six" type="checkbox"/>
                                <span class="change-her-green">绿灯闪烁:</span>
                                  <el-select v-model="select1" placeholder="请选择" class="input-one" >
                                          <el-option label="1秒" value="1"></el-option>
                                          <el-option label="3秒" value="2"></el-option>
                                          <el-option label="5秒" value="3"></el-option>
                                </el-select>
                                  <span class="change-her-intranet">内网地址:</span>
                                <el-input v-model="input1" placeholder="请输入内容"  class="input-two"></el-input>
                              <!-- 外网地址 -->
                                <span class="change-her-extranet">外网地址:</span>
                              <el-input v-model="input2" placeholder="请输入内容"  class="input-three"></el-input>
                                <!-- 选择创建帐套 -->
                               <span class="change-her-seven">创建帐套:</span>
                                <span class="change-her-eight">选择帐套:</span>
                                   <el-select v-model="select2" placeholder="请选择" class="input-four" >
                                          <el-option label="帐套一" value="1"></el-option>
                                          <el-option label="帐套二" value="2"></el-option>
                                          <el-option label="帐套三" value="3"></el-option>
                                </el-select>

                            </div>

                             <el-button class="login-info" type="info">保存</el-button>
                        </div>
                </div>
             </div>
        </div>
</template>

<script>
import {mapMutations,mapState} from 'vuex';
export default {
    name:'login',
    created(){
       // console.log(this)
    },
    computed:{
        ...mapState(['loginIsShow','loginIsNav']),
        
    },
  data() {
      var checkAge = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('用户名不能为空'));
        }
        setTimeout(() => {
          if (value < 4) {
              callback(new Error('用户名长度最少为4个单位'));
            } else {
              callback();
            }
          // if (!Number.isInteger(value)) {
          //   callback(new Error('请输入数字值'));
          // } 
          // else 
          // {
          //   if (value < 18) {
          //     callback(new Error('必须年满18岁'));
          //   } else {
          //     callback();
          //   }
          // }
        }, 1000);
      };
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } 
        else {
          // if (this.ruleForm2.checkPass !== '') {
          //   this.$refs.ruleForm2.validateField('checkPass');
          // }
          callback();
        }
      };
      // var validatePass2 = (rule, value, callback) => {
      //   if (value === '') {
      //     callback(new Error('请再次输入密码'));
      //   } else if (value !== this.ruleForm2.pass) {
      //     callback(new Error('两次输入密码不一致!'));
      //   } else {
      //     callback();
      //   }
      // };
      return {
        //绿灯闪烁
         select1:'',
         select2:'',
          input1: '',
          input2: '',
        ruleForm2: {
          pass: '',
          // checkPass: '',
          age: '',
          region: '',
          resource:'',
         
        },
        rules2: {
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
          // checkPass: [
          //   { validator: validatePass2, trigger: 'blur' }
          // ],
          age: [
            { validator: checkAge, trigger: 'blur' }
          ],
          // region: [
          //   { required: true, message: '请选择活动区域', trigger: 'change' }
          // ],
        }
      };
    },
    methods: {
       
    ...mapMutations(['handlClick']),
     openFullScreen2() {
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        setTimeout(() => {
          loading.close();
        }, 1000);
      
      },
      submitForm(formName) {
        this.openFullScreen2();
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // alert('submit!');
            //跳转到首页
            this.$router.push('/home/renli')
            
            
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
}
</script>

<style lang="scss" scoped>
  // .denglu{
  //   width: 123%;
  // }
// .chongzhi{
//         height: 20%;
//     width: 46%;
//   }
.table-down /deep/ .el-input--suffix .el-input__inner {
   
    text-align: center;
}
.table-down /deep/ .el-form-item__label{
font-size: 16px;
  color: #5e5e5e;
}
.table-down /deep/ .el-input__inner {
  height: 30px;
  
}
.el-form-item {
    margin-bottom: 3%;
}
.el-input {
   
    width:77%;
}
.awc{
 height: 71%;
    width: 76%;
    /* border: 1px solid; */
    background: #424045;
    left: 2%;
    position: absolute;
    top: 16%;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
      &-text{
          font-size: 15px;
          color: white;
          font-family: cursive;
      }
      &-circle{
        color: green;
        display: flex;
          &-yuan{
              width: 12px;
              height: 12px;
              background: green;
              border-radius: 50%;
              margin-right: 5px;
          }
      }
}
.c111{
  position: absolute;
  bottom:0;
  right: 7%;
}
.bbbb{
 margin-top:12%;
 margin-left: 13%;
}
  .login{
height: 121%;
width: 100%;
position: relative;
    &-header{
      height:60.37%;
     background-color: #e3e5e4;
     border-bottom: 10px solid #c9cbca;
    }
    &-footer{
      height: 39.63%;
       background-color:#353535;
       position: relative;
       .login-2{
          position: absolute;
          bottom: 16%;
          left: 5%;
          height: 14.78%;
          width: 16.355%;
       }
       .login-5{
          position: absolute;
          bottom: 0;
          right: 2%;
          height: 15.04%;
          width: 15.26%;
       }
    }
  } 
  .table{
    position: absolute;
    height: 48.1%;
    width: 42.5%;
    background: rgba(41,39,40,0.95);
    top: 23.35%;
    left: 27.67%;
    &-handup{
     height:19.91%;
     position: relative;
     .title{
    font-size: 40px;
    color: #f0f0f0;
    height: 53%;
    width: 20%;
    position: absolute;
    bottom: 0;
    left: 2%;
    text-shadow: 5px -2px 5px #5f5d5e;
    
     }
     .login-4{
    position: absolute;
    right: 1%;
    top: 6%;
    height: 28.52%;
    width: 3.195%;
    cursor: pointer;
     }
      .login-3{
    position: absolute;
    right:6%;
    top: 6%;
    height: 28.52%;
    width: 3.195%;
    cursor: pointer;
     }
     .login-1{
    position: absolute;
    top: 182%;
    left: 7%;
    height: 121.27%;
    width: 19.853%;
     }
    }
      &-down{
        position: absolute;
        right: 5%;
        height: 67.52%;
        width: 54.17%;
        background-color:#f0f0f0;
        
      }
  }
//设置
.table-setting{
    position: absolute;
    height: 350%;
    width: 75%;
    // border: 1px solid;
    top: 96%;
    left: 20%;
}
.change-her{
  height: 20%;
  // border: 1px solid;
 
    &-one{
    position: absolute;
    height: 12%;
    width: 23%;
    top: 6%;
    background: #5f5d5d;
    font-size: 15px;
    color: white;
    text-align: center;
    line-height: 40px;
    font-weight: 700;
    }
    &-two{
     position: absolute;
    top: 9%;
    left: 26%;
    
    color: white;
    font-size: 17px;
    }
    &-three{
    position: absolute;
    top: 8%;
    left: 31%;
    color: white;
    height: 9%;
    width: 9%;
    }
     &-four{
    position: absolute;
    height: 12%;
    width: 23%;
    top: 6%;
    left: 45%;
    background: #5f5d5d;
    font-size: 15px;
    color: white;
    text-align: center;
    line-height: 40px;
    font-weight: 700;
    }
     &-five{
     position: absolute;
    top: 9%;
    left: 71%;
    
    color: white;
    font-size: 17px;
    }
    &-six{
    position: absolute;
    top: 8%;
    left:76%;
    color: white;
    height: 9%;
    width: 9%;
    }
   &-green {
    position: absolute;
    height: 12%;
    width: 23%;
    top:24%;
    background: #5f5d5d;
    font-size: 15px;
    color: white;
    text-align: center;
    line-height: 40px;
    font-weight: 700;
    }
    .input-one{
      position: absolute !important;
    top:24%;
    left: 26%;
    width: 21.5%;
    
    }
    
    &-intranet {
    position: absolute;
    height: 12%;
    width: 23%;
    top:44%;
    background: #5f5d5d;
    font-size: 15px;
    color: white;
    text-align: center;
    line-height: 40px;
    font-weight: 700;
    }
 .input-two{
position: absolute !important;
    top:44%;
    left: 26%;
    width:54%;
 }
 //外网地址
  &-extranet {
    position: absolute;
    height: 12%;
    width: 23%;
    top:64%;
    background: #5f5d5d;
    font-size: 15px;
    color: white;
    text-align: center;
    line-height: 40px;
    font-weight: 700;
    }
 .input-three{
position: absolute !important;
    top:64%;
    left: 26%;
    width:54%;
 }
 //选择创建帐套
    &-seven{
          position: absolute;
    height: 12%;
    width:18%;
    top: 84%;
    background: #5f5d5d;
    font-size: 15px;
    color: white;
    text-align: center;
    line-height: 40px;
    font-weight: 700;
 }
  &-eight{
     position: absolute;
    height: 12%;
    width:18%;
    top: 84%;
    left: 20%;
    background: #5f5d5d;
    font-size: 15px;
    color: white;
    text-align: center;
    line-height: 40px;
    font-weight: 700;
   }
   .input-four{
      position: absolute !important;
      top:84%;
      left: 41%;
      width: 39%;
    
   }
 }
  .input-one /deep/ .el-input__inner{
        background: white;
        color: #332c2b;
      }
 .input-four /deep/ .el-input__inner{
        background: white;
        color: #332c2b;
      }
      //服务器名
  .server{
    position: absolute !important;
    top: 6%;
    width: 77%;
}
  //登陆按钮
  .login-info{
    position: absolute;
    bottom: -13%;
    right: 5%;
    width: 20%;
    height: 12%;

  }

</style>i